<template>
  <div id="change_password">
    <Card class="card">
      <div slot="title" class="card-title">
        <h1>
          {{ $t('chpwd.title') }}
        </h1>
      </div>
      <div class="card-slogen">
        <div class="card-slogen-item-l">
          <span>{{ $t('chpwd.title') }}</span>
        </div>
        <div class="card-slogen-item-r">
          <span>{{ $t('chpwd.mark') }}</span>
        </div>
      </div>
      <div class="card-form">
        <Form :label-width="120" :model="info" :rules="ruleValidate" ref="form">
          <FormItem :label="$t('chpwd.user')+'：'" required prop="usermail">
            <Input v-model="info.usermail" :placeholder="$t('chpwd.user_placeholder')"></Input>
          </FormItem>
          <FormItem :label="$t('chpwd.old_password')+'：'" required prop="old_password">
            <Input v-model="info.old_password" :placeholder="$t('chpwd.old_password_placeholder')" type="password"></Input>
          </FormItem>
          <FormItem :label="$t('chpwd.new_password')+'：'" required prop="new_password">
            <Input v-model="info.new_password" :placeholder="$t('chpwd.new_password_placeholder')" type="password"></Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit">
              {{ $t('chpwd.save') }}
            </Button>
            <Button @click="info={}">
              {{ $t('chpwd.cancel') }}
            </Button>
          </FormItem>
        </Form>
      </div>
    </Card>
  </div>
</template>

<script>
  import {Form, FormItem } from 'iview'
  import util from '@/util/toast'

  export default {
    name: "change_password",
    components: {
      Form, FormItem
    },
    data() {
      return {
        info: {
          usermail: "",
          old_password: "",
          new_password: ""
        },
        ruleValidate: {
          usermail: [
            {
              required: true,
              message: this.$t("chpwd.usermail_error"),
              trigger: "blur"
            }
          ],
          old_password: [
            {
              required: true,
              message: this.$t("chpwd.old_password_error"),
              trigger: "blur"
            }
          ],
          new_password: [
            {
              required: true,
              message: this.$t("chpwd.new_password_error"),
              trigger: "blur"
            }
          ]
        }
      }
    },
    methods: {
      handleSubmit() {
        this.$refs.form.validate((flag) => {
          if (flag) {
            let $info = this.info
            if ($info.old_password == $info.new_password) {
              util.toast(this, {code: 0, msg: this.$t('password_equal_error')});
              return false;
            }
            let $userinfo = {
              params:{
                usermail:this.info.usermail,
                password:this.info.new_password
              }
            };
            this.$axios.get("S_UserCPW.asp",$userinfo).then((res)=>{
               let $data = res.data;
               util.toast(this,$data)
              this.info = {}
            })
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .card {
    &-title {
      text-align: center;
    }

    &-slogen {
      display: flex;
      justify-content: space-between;

      &-item-l {
        font-weight: bold;
      }

      &-item-r {
        color: #999;
      }
    }

    &-form {
      width: 33%;
      padding-top: 50px;
      margin: auto;
    }
  }
</style>
